<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <h2>已支付订单</h2>
      <el-form-item label="订单编号" prop="orderCode">
        <el-input
          v-model="queryParams.orderCode"
          placeholder="请输入订单编号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="订单id" align="center" prop="order.id" />
      <el-table-column label="订单编码" align="center" prop="order.orderCode" />
      <el-table-column label="顾客编号" align="center" prop="order.cuid" />
      <el-table-column label="操作员编号" align="center" prop="order.opId" />
      <el-table-column label="门店编号" align="center" prop="order.shopId" />
      <el-table-column
        label="订单状态"
        align="center"
        prop="order.status"
        
      />
      <el-table-column label="应收" align="center" prop="payment.amount" />
      <el-table-column label="折扣" align="center" prop="payment.discount" />
      <el-table-column label="实收" align="center" prop="payment.actualMoney" />
      <el-table-column label="下单时间" align="center" prop="order.createTime" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="researchItemList(scope.row)"
          >查看详情</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:order:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-form
      :model="queryParams1"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <h2>已退货订单</h2>
      <el-form-item label="订单编号" prop="orderId">
        <el-input
          v-model="queryParams1.orderId"
          placeholder="请输入订单编号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery1"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery1">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="rejectOrderList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="订单id" align="center" prop="id" />
      <el-table-column label="操作员编号" align="center" prop="opid" />
      <el-table-column label="门店编号" align="center" prop="shopid" />
      <el-table-column label="退款总金额" align="center" prop="rejectAmount" />
      <el-table-column label="退款时间" align="center" prop="rejectTime" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="researchRejectItemList(scope.row)"
          >查看详情</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:order:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total1>0"
      :total="total1"
      :page.sync="queryParams1.pageNum"
      :limit.sync="queryParams1.pageSize"
      @pagination="getRejectList"
    />
    <el-dialog title="订单详情" :visible.sync="dialogTableVisible" width="950px">
      <el-table :data="orderItemList">
        <el-table-column label="条形码" align="center" prop="goodsList[0].barcode" width="100px" />
        <el-table-column label="名称" align="center" prop="goodsList[0].name" width="100px" />
        <el-table-column
          label="颜色"
          width="100px"
          align="center"
          prop="goodsList[0].coid"
          :formatter="((row,column)=>{return gDatasFormatter(row,column,colorList)})"
        />
        <el-table-column
          width="100px"
          label="尺码"
          align="center"
          prop="goodsList[0].size"
          :formatter="((row,column)=>{return gDatasFormatter(row,column,sizeList)})"
        />
        <el-table-column
          label="类型"
          width="100px"
          align="center"
          prop="goodsList[0].type"
          :formatter="((row,column)=>{return gDatasFormatter(row,column,typeList)})"
        />
        <el-table-column label="数量" align="center" prop="number" width="100px" />
        <el-table-column label="单价" align="center" prop="salePrice" width="100px" />
        <el-table-column label="小计" align="center" prop="subTotal" width="100px" />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="200px"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="rejectItemList(scope.row)"
            >退货</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="exchangeItemList(scope.row)"
            >换货</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="退货" :visible.sync="dialogFormVisible1">
      <el-form :model="rejectOrder">
        <el-form-item label="当前订单编号:" :label-width="formLabelWidth">{{rejectOrder.orderId}}</el-form-item>
        <el-form-item label="收银员编号:" :label-width="formLabelWidth">
          <el-input v-model="rejectOrder.opid" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="门店编号:" :label-width="formLabelWidth">
          <el-col :span="9">
            <el-input v-model="rejectOrder.shopid" autocomplete="off"></el-input>
          </el-col>
          <el-button type="success" round @click="newRejectItem()" class="changeBtn">新建退货订单</el-button>
        </el-form-item>
      </el-form>
      <el-form :model="rejectForm">
        <el-form-item label="退款方式" :label-width="formLabelWidth">
          <el-select v-model="rejectForm.rejectType" placeholder="请选择退款方式">
            <el-option v-for="item in paywayList" :key="item.id" :label="item.way" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="退款数量" :label-width="formLabelWidth">
          <el-input-number v-model="rejectForm.quantity" :min="1" size="mini"></el-input-number>
          <el-button type="success" round @click="rejectAmount()" class="changeBtn">计算退款金额</el-button>
        </el-form-item>
        <el-form-item label="退款原因" :label-width="formLabelWidth">
          <el-input v-model="rejectForm.rejectReason" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="退款金额" :label-width="formLabelWidth">
          <el-input v-model="rejectForm.rejectPrice" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="reject_item()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="换货" :visible.sync="dialogFormVisible2">
      <el-form :model="exchangeOrder">
        <el-form-item label="当前订单编号:" :label-width="formLabelWidth">{{exchangeOrder.orderId}}</el-form-item>
        <el-form-item label="收银员编号:" :label-width="formLabelWidth">
          <el-input v-model="exchangeOrder.opid" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="门店编号:" :label-width="formLabelWidth">
          <el-col :span="9">
            <el-input v-model="exchangeOrder.shopid" autocomplete="off"></el-input>
          </el-col>
          <el-button type="success" round @click="newExchangeItem()" class="changeBtn">新建换货订单</el-button>
        </el-form-item>
      </el-form>
      <el-form :model="exchangeForm">
        <el-form-item label="换货数量" :label-width="formLabelWidth">
          <el-input-number v-model="exchangeForm.quantity" :min="1" size="mini"></el-input-number>
        </el-form-item>
        <el-form-item label="换货原因" :label-width="formLabelWidth">
          <el-input v-model="exchangeForm.reason" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="exchange_item()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="退货详情" :visible.sync="dialogFormVisible3">
      <el-form :model="rejectOrderItem">
        <el-form-item label="商品条形码:" :label-width="formLabelWidth">
         {{rejectOrderItem.barcode}}
        </el-form-item>
        <el-form-item label="名称:" :label-width="formLabelWidth">
         {{rejectOrderItem.name}}
        </el-form-item>
        <el-form-item label="颜色:" :label-width="formLabelWidth">
         <el-select v-model="rejectOrderItem.coid">
            <el-option
              v-for="item in colorList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="尺寸:" :label-width="formLabelWidth">
         <el-select v-model="rejectOrderItem.size">
            <el-option
              v-for="item in sizeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              >
            </el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="退货数量:" :label-width="formLabelWidth">
         {{rejectOrderItem.quantity}}
        </el-form-item>
        <el-form-item label="单价:" :label-width="formLabelWidth">
         {{rejectOrderItem.price}}
        </el-form-item>
        <el-form-item label="退货价格:" :label-width="formLabelWidth">
         {{rejectOrderItem.rejectAmount}}
        </el-form-item>
        <el-form-item label="退货原因:" :label-width="formLabelWidth">
         {{rejectOrderItem.rejectReason}}
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible3 = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listOrder,
  getOrder,
  delOrder,
  addOrder,
  updateOrder,
  exportOrder,
  searchOrder
} from "@/api/system/order";
import { searchPayment } from "@/api/system/payment";
import { listColor, getColor } from "@/api/system/color";
import {
  addRejectOrder,
  rejectItem,
  listRejectOrder,
  getRejectOrder
} from "@/api/system/rejectOrder";
import { addExchangeOrder, exchangeItem } from "@/api/system/exchangeOrder";

export default {
  name: "Order",
  components: {},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 子表选中数据
      checkedOrderItem: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      total1:0,
      typeList: [
        {
          id: 1,
          name: "上架"
        },
        {
          id: 2,
          name: "下架"
        }
      ],
      sizeList: [
        {
          id: 1,
          name: "S"
        },
        {
          id: 2,
          name: "M"
        },
        {
          id: 3,
          name: "L"
        },
        {
          id: 4,
          name: "XL"
        }
      ],
      // order表格数据
      orderList: [],
      // item表格数据
      orderItemList1: [],
      orderItemList: [],
      goods: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      dialogTableVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderCode: null,
        cuid: null,
        opId: null,
        shopId: null,
        total: null,
        orderId: null
      },
      queryParams1: {
        pageNum: 1,
        pageSize: 10,
        orderCode: null,
        cuid: null,
        opId: null,
        shopId: null,
        total1: null,
        orderId: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      dialogForm: [
        {
          name: "便携式防紫外线连帽外套",
          barcode: "433637999",
          coid: 1,
          size: 2,
          number: 2,
          salePrice: 120.0,
          subTotal: 240.0
        }
      ],
      rejectOrder: {
        orderId: null,
        opid: null,
        shopid: null
      },
      rejectForm: {
        rejectId: null,
        itemCode: null,
        quantity: 1,
        rejectPrice: null,
        rejectReason: null,
        rejectType: null
      },
      exchangeOrder: {
        orderId: null,
        opid: null,
        shopid: null
      },
      exchangeForm: {
        exchangeId: null,
        itemCode: null,
        quantity: 1,
        reason: null
      },
      paywayList: [
        {
          id: "1",
          way: "现金返回"
        },
        {
          id: "2",
          way: "微信返回"
        },
        {
          id: "3",
          way: "支付宝返回"
        },
        {
          id: "4",
          way: "银行卡返回"
        }
      ],
      formLabelWidth: "120px",
      colorList: [],
      rejectOrderList: [], //退货订单数据
      statusList: [
        {
          id: "0",
          name: "未支付"
        },
        {
          id: "1",
          name: "已支付"
        },
        {
          id: "2",
          name: "已退货"
        },
        {
          id: "3",
          name: "已换货"
        }
      ],
      dialogFormVisible3: false,
      rejectOrderItem:{
        barcode:null,
        name:null,
        quantity:null,
        price:null,
        rejectReason:null,
        coid:null,
        size:null,
        rejectAmount:null

      },
      rejeactPrice:0
    };
  },
  created() {
    this.getList();
    this.getColors();
    this.getRejectList();
  },
  methods: {
    getColors() {
      listColor(this.queryParams).then(response => {
        this.colorList = response.rows;
        this.total = response.total;
        this.loading = false;
        console.log(this.colorList);
      });
    },
    /** 查询order列表 */
    getList() {
      this.loading = true;
      listOrder(this.queryParams).then(response => {
        this.orderList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getRejectList() {
      this.loading = true;
      listRejectOrder(this.queryParams1).then(response => {
        console.log(response.data);
        this.rejectOrderList = response.rows;
        this.total1 = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    //查看订单详情
    researchItemList(row) {
      //console.log(row.orderCode);

      getOrder(row.order.id).then(response => {
        console.log(response.data);
        (this.orderItemList = response.data.order.orderItemList),
          (this.goods = response.data.order.orderItemList.goodsList);
        console.log(this.orderItemList), console.log(this.goods);
      });
      this.dialogTableVisible = true;
      this.rejectOrder.orderId = row.order.id;
      this.exchangeOrder.orderId = row.order.id;
    },
    researchRejectItemList(row){
      this.dialogFormVisible3=true
      getRejectOrder(row.id).then(response=>{
        console.log(response.data)
        this.rejectOrderItem.barcode=response.data.rejectItemList[0].goods.barcode;
        this.rejectOrderItem.name=response.data.rejectItemList[0].goods.name;
        this.rejectOrderItem.price=response.data.rejectItemList[0].rejectPrice;
        this.rejectOrderItem.quantity=response.data.rejectItemList[0].quantity;
        this.rejectOrderItem.coid=response.data.rejectItemList[0].goods.coid;
        this.rejectOrderItem.size=response.data.rejectItemList[0].goods.size;
        this.rejectOrderItem.rejectReason=response.data.rejectItemList[0].rejectReason;
        this.rejectOrderItem.rejectAmount=response.data.rejectAmount;
      })
    },
    rejectAmount(){
       
      this.rejectForm.rejectPrice=this.rejeactPrice*this.rejectForm.quantity
    },


    //退货
    rejectItemList(row) {
      this.dialogFormVisible1 = true;
     this.rejectForm.itemCode = row.goodsList[0].barcode;
     this.rejeactPrice=row.goodsList[0].salePrice
      console.log(this.rejectForm.itemCode);
    },
    //新建退货订单
    newRejectItem() {
      addRejectOrder(this.rejectOrder).then(response => {
        this.rejectForm.rejectId = response.data;
        console.log(this.rejectForm.rejectId);
         this.$message({
          message: '新建退货订单成功',
          type: 'success'
        });
      });
    },
    //退货
    reject_item() {
      (this.dialogFormVisible1 = false),

        rejectItem(this.rejectForm).then(response => {
          console.log(response.data);
          if(response.data!=0){
            this.$message({
          message: '退货成功',
          type: 'success'
        });
          }
        });
    },
    exchangeItemList(row) {
      this.dialogFormVisible2 = true;
      this.exchangeForm.itemCode = row.goodsList[0].barcode;
      console.log(this.exchangeForm.itemCode);
    },
    //新建换货订单
    newExchangeItem() {
      addExchangeOrder(this.exchangeOrder).then(response => {
        this.exchangeForm.exchangeId = response.data;
        console.log(this.exchangeForm.exchangeId);
      });
    },
    //换货
    exchange_item() {
      (this.dialogFormVisible2 = false),
        exchangeItem(this.exchangeForm).then(response => {
          console.log(response.data);
        });
    },

    // 表单重置
    reset() {
      this.form = {
        id: null,
        orderCode: null,
        cuid: null,
        createTime: null,
        opId: null,
        shopId: null,
        total: null
      };
      this.orderItemList = [];
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      searchOrder(this.queryParams.orderCode).then(response => {
        this.orderList.splice(0,this.orderList.length);
        this.orderList.push(response.data)
        console.log(this.orderList)
       
      });
    },
    /** 退货搜索按钮操作 */
    handleQuery1() {
      this.queryParams1.pageNum = 1;
      this.getRejectList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加order";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getOrder(id).then(response => {
        this.form = response.data;
        this.orderItemList = response.data.orderItemList;
        this.open = true;
        this.title = "修改order";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.orderItemList = this.orderItemList;
          if (this.form.id != null) {
            updateOrder(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addOrder(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除order编号为"' + ids + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return delOrder(ids);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        });
    },
    /** item序号 */
    rowOrderItemIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** item添加按钮操作 */
    handleAddOrderItem() {
      let obj = {};
      obj.gid = "";
      obj.number = "";
      obj.salePrice = "";
      obj.subTotal = "";
      this.orderItemList.push(obj);
    },
    /** item删除按钮操作 */
    handleDeleteOrderItem() {
      if (this.checkedOrderItem.length == 0) {
        this.$alert("请先选择要删除的item数据", "提示", {
          confirmButtonText: "确定"
        });
      } else {
        this.orderItemList.splice(this.checkedOrderItem[0].index - 1, 1);
      }
    },
    /** 单选框选中数据 */
    handleOrderItemSelectionChange(selection) {
      if (selection.length > 1) {
        this.$refs.orderItem.clearSelection();
        this.$refs.orderItem.toggleRowSelection(selection.pop());
      } else {
        this.checkedOrderItem = selection;
      }
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有order数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return exportOrder(queryParams);
        })
        .then(response => {
          this.download(response.msg);
        });
    },
    gDatasFormatter(row,column,dicData){
      let results = row[column.property]; // 默认原真实值
      if(dicData && dicData.length>0){
          for(let i=0;i<dicData.length;i++){
              let item = dicData[i];
              if(row[column.property] === item.id){
                  results = item.name;
                  break;
              }
          }
    }
    return results;
    }
  }
};
</script>
<style>
.changeBtn {
  margin-left: 20px;
}
</style>